<template>
  <div id="carwrite">
    <h1 class="titleTag">审核</h1>
    <div v-show="!show" class="cardone">
      <h2 class="title2">车俩行驶证</h2>
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="image">
            <img style="width:100%: overflow: hidden" :src="$route.query.data.faceImgId" alt="" srcset="">
          </div>
        </el-col>
        <el-col :span="12">
          <el-form label-position="right" :model="ruleForm" :rules="rules" label-width="130px" ref='ruleForm'>
            <el-form-item label="车牌号" prop="carNo">
              <el-input v-model="ruleForm.carNo" size="small"></el-input>
            </el-form-item>
            <el-form-item label="车俩类型" prop="typeid">
              <el-input v-model="ruleForm.typeid" size="small"></el-input>
            </el-form-item>
            <el-form-item label="所有人" prop="carOwner">
              <el-input v-model="ruleForm.carOwner" size="small"></el-input>
            </el-form-item>
            <el-form-item label="使用性质" prop="nature">
              <el-input v-model="ruleForm.nature" size="small"></el-input>
            </el-form-item>
            <el-form-item label="住所" prop="address">
              <el-input v-model="ruleForm.address" size="small"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="30">
        <el-col :span="12">
          <div class="image">
            <img style="width:100%: overflow: hidden" :src="$route.query.data.backImgId" alt="" srcset="">
          </div>
        </el-col>
        <el-col :span="12">
          <el-form label-position="right" :model="ruleForm" :rules="rules" label-width="130px" ref='ruleForm2'>
            <el-form-item label="车牌型号" prop="carBrandModel">
              <el-input v-model="ruleForm.carBrandModel" size="small"></el-input>
            </el-form-item>
            <el-form-item label="车辆识别代码" prop="carIdenCode">
              <el-input v-model="ruleForm.carIdenCode" size="small"></el-input>
            </el-form-item>
            <el-form-item label="发动机号" prop="engineNo">
              <el-input v-model="ruleForm.engineNo" size="small"></el-input>
            </el-form-item>
            <el-form-item label="注册日期" prop="recordDate">
              <el-input v-model="ruleForm.recordDate" size="small"></el-input>
            </el-form-item>
            <el-form-item label="发证日期" prop="openingDate">
              <el-input v-model="ruleForm.openingDate" size="small"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <div class="submitBUTTON mt24">
        <button @click="nextPage">下一页</button>
        <button @click="$router.go(-1)">返回</button>
      </div>
    </div>
    <div v-show="show" class="cardtwo">
      <h2 class="title2">车俩道路运输证</h2>
      <el-row :gutter="100">
        <el-col :span="10">
          <div class="image image2">
            <img style="width:100%: overflow: hidden" :src="$route.query.data.faceImg" alt="" srcset="">
          </div>
        </el-col>
        <el-col :span="14">
          <el-form label-position="left" :model="ruleForm" :rules="rules" label-width="140px" ref='ruleForm3'>
            <el-form-item label="业户名称" prop="owner">
              <el-input v-model="ruleForm.owner" size="small"></el-input>
            </el-form-item>
            <el-form-item label="道路运输证号" prop="carrigerId">
              <el-input v-model="ruleForm.carrigerId" size="small"></el-input>
            </el-form-item>
            <el-form-item label="证件有效开始时间" prop="startTime">
              <el-input v-model="ruleForm.startTime" size="small"></el-input>
            </el-form-item>
            <el-form-item label="证件有效截止时间" prop="endtime">
              <el-input v-model="ruleForm.endtime" size="small"></el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <el-row :gutter="100">
        <el-col :span="10">
          <div class="image image2">
            <img style="width:100%: overflow: hidden" :src="$route.query.data.backImg" alt="" srcset="">
          </div>
        </el-col>
        <el-col :span="14">
          <el-form label-position="left" :model="ruleForm" :rules="rules" label-width="130px">
            <el-form-item label="经营范围" prop="scope">
              <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="ruleForm.scope">
              </el-input>
            </el-form-item>
            <el-form-item label="住址" prop="site">
              <el-input type="textarea" :rows="3" placeholder="请输入内容" v-model="ruleForm.site">
              </el-input>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
      <h2 class="title2">车俩车头正面照片</h2>
      <el-row :gutter="100">
        <el-col :span="10">
          <div class="image image2">
            <img style="width:100%: overflow: hidden" :src="$route.query.data.headImgId" alt="" srcset="">
          </div>
        </el-col>
        <!-- <el-col :span="14">
          <el-form label-position="left" :model="ruleForm" :rules="rules" label-width="130px">
            <el-form-item label="业户名称" prop="owner">
              <el-input v-model="ruleForm.owner" size="small"></el-input>
            </el-form-item>
            <el-form-item label="道路运输证号" prop="carriger_id">
              <el-input v-model="ruleForm.carriger_id" size="small"></el-input>
            </el-form-item>
            <el-form-item label="证件有效截止时间" prop="endtime">
              <el-input v-model="ruleForm.endtime" size="small"></el-input>
            </el-form-item>
          </el-form>
        </el-col> -->
      </el-row>
      <div class="submitBUTTON mt24">
        <button @click="submitTo()">确认</button>
        <button @click="show=false">上一页</button>
      </div>
    </div>
  </div>
</template>

<script>
import { apiCar } from "@/utils/api";
export default {
  name: "carwrite",
  data() {
    return {
      show: false,
      ruleForm: {
        carNo: "",
        typeid: "",
        carOwner: "",
        nature: "",
        address: "",
        carBrandModel: "",
        carIdenCode: "",
        engineNo: "",
        recordDate: "",
        openingDate: "",
        owner: "",
        carrigerId: "",
        startTime: "",
        endTime: "",
        scope: "",
        site: ""
      },
      rules: {
        carNo:{required:true,message:'请输入车牌号',trigger:'blur'},
        typeid:{required:true,message:'请输入车辆类型',trigger:'blur'},
        carOwner:[{required:true,message:'请输入车辆所有人',trigger:'blur'},
         {pattern: /^[\u2E80-\u9FFF]+$/,  message: "请输入汉字", trigger: "blur"}],
        nature:{required:true,message:'请输入车辆使用性质',trigger:'blur'},
        address:{required:true,message:'请输入住所',trigger:'blur'},
        carBrandModel:{required:true,message:'请输入车牌型号',trigger:'blur'},
        carIdenCode:{required:true,message:'请输入车辆识别代码',trigger:'blur'},
        engineNo:{required:true,message:'请输入车辆发动机号',trigger:'blur'},
        recordDate:{required:true,message:'请输入车辆注册日期',trigger:'blur'},
        openingDate:{required:true,message:'请输入发证日期',trigger:'blur'},
        owner:{required:true,message:'请输入业户名称',trigger:'blur'},
        carrigerId:{required:true,message:'请输入道路运输证号',trigger:'blur'},
        startTime:{required:true,message:'请输入证件有效开始时间',trigger:'blur'},
        endtime:{required:true,message:'请输入证件有效截止时间',trigger:'blur'},
        scope:{required:false,message:'请输入经营范围',trigger:'blur'},
        site:{required:false,message:'请输入住址',trigger:'blur'},
       }
    };
  },
  created() {},
  mounted() {
    console.log(this.$route.query.data.backImg);
  },
  methods: {
     nextPage(){
      this.$refs.ruleForm.validate((valid)=>{
        if(valid){
          this.$refs.ruleForm2.validate((valid)=>{
            if(valid){
              this.show=true;
            }
          })
        }
        else{
          console.log('error sumit');
          return false
        }
      })
    },
    submitTo() {
      // 审核校验完成才能提交
      this.$refs.ruleForm3.validate((valid)=>{
        if(valid){
          apiCar({ ...this.ruleForm, ...{ idenid: this.$route.query.data.idenid } })
        .then(res => {
          this.$message({ message: "审核通过", type: "success" });
          this.$router.go(-1);
          // if (res.data.status == 2) {
          //   this.$message({ message: "审核中", type: "warning" });
          // } else if (res.data.status == 3) {
          //   this.$message({ message: "审核未通过", type: "error" });
          // } else if (res.data.status == 1) {
          //   this.$message({ message: "已认证", type: "success" });
          // }
        })
        .catch(error => {
          console.log(error);
        });
        }
      })
      
    }
  }
};
</script>

<style lang="scss" scoped>
#carwrite {
  min-height: 100%;
  background-color: #fff;
  padding: 24px;
  box-sizing: border-box;
  .title2 {
    font-weight: normal;
    margin: 24px 0 14px;
    font-size: 16px;
    color: rgba(0, 0, 0, 0.85);
    line-height: 20px;
  }
  .image {
    border: 1px solid rgba(0, 0, 0, 0.15);
    max-height: 360px;
    overflow-y: auto;
    img {
      width: 100%;
    }
    &.image2 {
      border: none;
      text-align: center;
      padding: 10px;
      img {
        width: 80%;
      }
    }
  }
}
</style>
